<template>
  <div class="tool_bar_module">
    <ul>
      <li
        v-for="(tools, index) in tool_list"
        :key="index"
        :class="{
          isActive: tools[selected_tool]
        }"
      >
        <el-popover
          v-if="Object.keys(tools).length > 1"
          placement="right"
          width="100"
          trigger="hover"
        >
          <ul class="popover-list">
            <li
              v-for="(tool, key) in tools"
              :key="key"
              :class="{
                isActive: key === selected_tool
              }"
              @click="changeTool(key.toString())"
            >
              <i :class="`iconfont icon-${key}`" />
              <span>{{ tool }}</span>
            </li>
          </ul>
          <!-- <el-tooltip
            slot="reference"
            :content="showing_tool[index].label"
            placement="right"
            effect="dark"
          > -->
          <i slot="reference" :class="`iconfont ${generateIcon(index)}`" />
          <!-- </el-tooltip> -->
        </el-popover>
        <el-tooltip
          v-else
          class="item"
          effect="dark"
          :content="Object.values(tools)[0]"
          placement="right"
        >
          <i
            :class="`iconfont ${generateIcon(index)}`"
            @click="changeTool(Object.keys(tools)[0])"
          />
        </el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit } from 'vue-property-decorator'
import { Dictionary } from 'vue-router/types/router'
@Component
class ToolBar extends Vue {
  tool_list: Dictionary<string>[] = [
    { cursor: '选择工具' },
    { board: '画板' },
    {
      square: '矩形',
      triangle: '三角形',
      circle: '圆形',
      octagon: '多边形'
    },
    { text: '文本' }
  ]
  selected_tool: string = 'cursor'
  generateIcon(index: number) {
    if (this.tool_list[index][this.selected_tool]) return 'icon-' + this.selected_tool
    else return 'icon-' + Object.keys(this.tool_list[index])[0]
  }
  @Emit('onToolChange')
  changeTool(toolname: string) {
    this.selected_tool = toolname
    return toolname
  }
}
export default ToolBar
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.tool_bar_module {
  width: 45px;
  ul {
    li {
      height: 45px;
      line-height: 45px;
      #flex(row, center, center);
      i {
        font-size: 20px;
        #color(color, --primary-text-color);
      }
    }
    .isActive {
      #color(background-color, --primary-hover-text-color);
    }
  }
}
.popover-list {
  li {
    box-sizing: border-box;
    padding: 5px 0 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    #flex(row, baseline, flex-start);
    i {
      margin-right: 5px;
    }
  }
  li:hover {
    #color(background-color, --primary-hover-text-color);
  }
  .isActive {
    #color(background-color, --primary-hover-text-color);
  }
}
</style>
